<!--
 * @Descripttion: 商品列表
 * @version: 
 * @Author:Hui
 * @Date: 2023-07-03 15:44:14
 * @LastEditTime: 2023-11-25 09:56:39
 * @LastEditors: sueRimn
-->


<template>
  <view class="category" :style="{ height: (systemInfo.windowHeight-50) + 'px' }">
    <!-- 头部 -->
    <search />

    <view class="d-flex warp flex-row">
      <left-box :height="mainHeight" :list="categoryList" :categoryId="categoryId" :categoryIndex="categoryIndex"
        @onClick="handleCategoryClick" />
      <view class="right-box flex-fill">
        <scroll-view scroll-y :style="{ height: mainHeight + 'px' }">
          <!-- 本机机型 -->
          <my-phone v-if="showProductInfo.productId" :productInfo="showProductInfo" />

          <!-- 推荐品牌 -->
          <hot-brand :list="hotBrandList" @handleBrandClick="handleBrandClick" />

          <!-- 热门机型 -->
          <hot-phone :list="hotProductList" @onClick="handleProductClick" />

          <!-- 全部品牌 -->
          <brand-list :loading="loading" :list="brands" @handleBrandClick="handleBrandClick" />
        </scroll-view>
      </view>

    </view>

    <view>
      <product-list-layer ref="productListRef" :height="mainHeight" :list="list" :categoryId="categoryId"
        :brandId="brandId" @handleProductClick="handleProductClick" />
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'

import {
  fetchCategoryList,
  fetchHotBrand,
  fetchGroupBrand,
  fetchHotList,
} from '@/api'

import { wait } from '@/utils'


import Search from './components/Search.vue'
import LeftBox from './components/LeftBox.vue'
import MyPhone from './components/MyPhone.vue'
import HotBrand from './components/HotBrand.vue'
import HotPhone from './components/HotPhone.vue'
import BrandList from './components/BrandList.vue'
import ProductListLayer from './components/ProductListLayer.vue'
import productEvaluateInfo from '@/mixins/productEvaluateInfo'
export default {
  components: { Search, LeftBox, MyPhone, HotBrand, HotPhone, BrandList, ProductListLayer },
  data() {
    return {
      loading: true,

      categoryList: [], // 分类列表
      categoryId: 0, // 分类id
      categoryIndex: 0,

      hotBrandList: [],
      brands: [],
      brandId: 0,

      hotProductList: [],

      list: [],

      scrollTop: 0

    }
  },
  mixins: [productEvaluateInfo],
  computed: {
    ...mapGetters([
      'systemInfo', 'visitDeviceInfo',
    ]),

    // 主体高度
    mainHeight() {
      const { windowHeight = 0 } = this.systemInfo
      const headerH = 105, empty = 25 // 留白空间
      const h = windowHeight - (windowHeight / 1334 * headerH) - empty
      return h
    }
  },

  onLoad(options) {
    const { catId, categoryId } = options
    if (catId || categoryId) {
      this.categoryId = Number(catId || categoryId)
    }

    this.loadCategory()
  },
  onShow() {
		this.loadProductEvaluateInfo()
	},

  async created() {
    await wait(100)
  },

  // 页面滚动到底部
  onReachBottom() {
    if (!this.loadMore && this.haveMore) {
      this.loadMore = true
      this.page = Number(this.page) + 1
      this.$nextTick(() => {
        this.loadList()
      })
    }
  },

  onShareAppMessage() {
    return {
      title: '出手鸭',
    }
  },
  onShareTimeline() {
    return {
      title: '出手鸭',
    }
  },


  methods: {
    loadCategory() {
      fetchCategoryList().then(({ data, code }) => {
        if (code === 200) {
          this.categoryList = data || []
          if (data.length) {
            if (this.categoryId) {
              const index = data.findIndex(item => item.categoryId === this.categoryId)
              index === -1 && (this.categoryId = data[0].categoryId)
            } else {
              this.categoryId = data[0].categoryId
            }

            this.loadHotBrand()
            this.loadBrands()
            this.loadHotProduct()
          }
        }
      })
    },

    loadHotBrand() {
      this.hotBrandList = []
      fetchHotBrand({ categoryId: this.categoryId, size: 12 }).then(({ code, data }) => {
        if (code === 200) {
          this.hotBrandList = data || []
        }
      })
    },

    loadBrands() {
      this.loading = true
      this.brands = []
      try {
        fetchGroupBrand(this.categoryId).then(({ code, data }) => {
          if (code === 200) {
            this.brands = data || []
          }
        })
      } finally {
        setTimeout(() => {
          this.loading = false
        }, 100)
      }
    },

    loadHotProduct() {
      this.hotProductList = []
      fetchHotList({ categoryId: this.categoryId, size: 3 }).then(({ code, data }) => {
        if (code === 200) {
          this.hotProductList = data || []
        }
      })
    },

    scroll: function (e) {
      // 如果使用此方法，请自行增加防抖处理
      this.scrollTop = e.detail.scrollTop
    },

    // 分类点击
    handleCategoryClick(index) {
      const { categoryId } = this.categoryList[index]

      if (this.categoryId === categoryId) { return }

      this.categoryId = categoryId
      this.categoryIndex = index
      this.$nextTick(() => {
        this.scrollTop = 0
      });

      this.loadHotBrand()
      this.loadBrands()
      this.loadHotProduct()
    },

    // 品牌点击
    handleBrandClick(brandId) {
      this.brandId = brandId
      this.$nextTick(() => {
        this.$refs.productListRef.onOpen()
      })
    },

    // 判断nav导航栏移动
    navMove(index) {
      if (index > 6) {
        this.navScrollIntoView = `category-nav-${index}`
      } else {
        this.navScrollIntoView = 'category-nav-0'
      }
    },


    // 商品点击
    handleProductClick(item) {
      uni.navigateTo({ url: `/pages/product/index?id=${item.productId}` })
    }


  }
}
</script>


<style lang="scss" scoped>
.category {
  background: #F6F7F9;
  position: relative;
  z-index: 1;
  /* #ifdef H5 */
  padding-top: calc(var(--status-bar-height) + 44px);
  /* #endif */
}
</style>